<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<HTML>
	<HEAD>
		<meta http-equiv="Content-Language" content="zh-cn">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="${pageContext.request.contextPath}/css/Style1.css" rel="stylesheet" type="text/css" />
		<script language="javascript" src="${pageContext.request.contextPath}/js/public.js"></script>
		
		<!-- 弹出层插件 -->
		<link href="${pageContext.request.contextPath}/css/popup_layer.css" type="text/css" rel="stylesheet"/>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/popup_layer.js"></script>		
		<!-- 调用插件弹出层的方法 -->
		<script type="text/javascript">
			$(function(){
				//弹出层插件调用
				new PopupLayer({
					trigger:".clickedElement",
					popupBlk:"#showDiv",
					closeBtn:"#closeBtn",
					useOverlay:true
				});
			});

			//订单详情
			function findOrderInfoByOid(oid) {
			    //清除无用的信息
			    $("#shodDivOid").html("");
			    $("#showDivTab").html("");
			    //显示loading
                $("#loading").css("display","block");

                $.post(
                    "${pageContext.request.contextPath}/admin?method=findOrderInfoByOid",
                    {"oid":oid},
                    function (date) {
                        //设置oid
                        $("#shodDivOid").html(oid);
                        //隐藏loading
                        $("#loading").css("display","none");

                        /*[{pimage=products/1/c_0032.jpg, shop_price=6688.0, pname=Apple MacBook Air MJVE2CH/A 13.3英寸, subtotal=6788.0, count=1},
                        {pimage=products/1/c_0010.jpg, shop_price=2599.0, pname=华为 Ascend Mate7, subtotal=2699.0, count=1}]*/
                        var content = "<tr id='showTableTitle'>\n" +
                            "\t\t\t\t\t\t\t<th width='20%'>图片</th>\n" +
                            "\t\t\t\t\t\t\t<th width='25%'>商品</th>\n" +
                            "\t\t\t\t\t\t\t<th width='20%'>价格</th>\n" +
                            "\t\t\t\t\t\t\t<th width='15%'>数量</th>\n" +
                            "\t\t\t\t\t\t\t<th width='20%'>小计</th>\n" +
                            "\t\t\t\t\t\t</tr>";
                        for (var i = 0; i < date.length; i++){
                            content += "<tr style='text-align: center;'>\n" +
                                "\t\t\t\t\t\t\t<td>\n" +
                                "\t\t\t\t\t\t\t\t<img src='${pageContext.request.contextPath }/"+date[i].pimage+"' width='70' height='60'>\n" +
                                "\t\t\t\t\t\t\t</td>\n" +
                                "\t\t\t\t\t\t\t<td><a target='_blank'>"+date[i].pname+"</a></td>\n" +
                                "\t\t\t\t\t\t\t<td>￥"+date[i].shop_price+"</td>\n" +
                                "\t\t\t\t\t\t\t<td>"+date[i].count+"</td>\n" +
                                "\t\t\t\t\t\t\t<td><span class='subtotal'>￥"+date[i].subtotal+"</span></td>\n" +
                                "\t\t\t\t\t\t</tr>\n" +
                                "\t\t\t\t\t\t<tr style='text-align: center;'>\n";
                        }
                        $("#showDivTab").html(content);
                    },
                    "json"
                );
                
            }
		</script>
		
	</HEAD>
	<body>
	
		<form id="Form1" name="Form1" action="${pageContext.request.contextPath}/user/list.jsp" method="post">
			<table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0">
				<TBODY>
					<tr>
						<td class="ta_01" align="center" bgColor="#afd1f3">
							<strong>订单列表</strong>
						</TD>
					</tr>
					
					<tr>
						<td class="ta_01" align="center" bgColor="#f5fafe">
							<table cellspacing="0" cellpadding="1" rules="all"
								bordercolor="gray" border="1" id="DataGrid1"
								style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
								<tr
									style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">

									<td align="center" width="10%">
										序号
									</td>
									<td align="center" width="10%">
										订单编号
									</td>
									<td align="center" width="10%">
										订单金额
									</td>
									<td align="center" width="10%">
										收货人
									</td>
									<td align="center" width="10%">
										订单状态
									</td>
									<td align="center" width="50%">
										订单详情
									</td>
								</tr>


                                <c:forEach items="${orderList}" var="order" varStatus="vs">
                                    <tr onmouseover="this.style.backgroundColor = 'white'"
                                        onmouseout="this.style.backgroundColor = '#F5FAFE';">
                                        <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                            width="18%">
                                                ${vs.count}
                                        </td>
                                        <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                            width="17%">
                                                ${order.oid}
                                        </td>
                                        <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                            width="17%">
                                                ${order.total}
                                        </td>
                                        <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                            width="17%">
                                                ${order.name}
                                        </td>
                                        <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                            width="17%">
                                                ${order.state == 0?"未付款":"已付款"}
                                        </td>
                                        <td align="center" style="HEIGHT: 22px">
                                            <input type="button" value="订单详情" class="clickedElement" onclick="findOrderInfoByOid('${order.oid}')"/>
                                        </td>
                                    </tr>
                                </c:forEach>
							</table>
						</td>
					</tr>
					
				</TBODY>
			</table>
		</form>
		
		<!-- 弹出层 HaoHao added -->
        <div id="showDiv" class="blk" style="display:none;">
            <div class="main" style="height: 400px;">
                <h2>订单编号：<span id="shodDivOid" style="font-size: 13px;color: #999">123456789</span></h2>
                <a href="javascript:void(0);" id="closeBtn" class="closeBtn">关闭</a>
                <div id="loading" style="padding-top:30px;text-align: center;">
                	<img alt="" style="width: 50%;" src="${pageContext.request.contextPath }/images/loading.gif">
                </div>
				<div style="padding:20px;">
					<table id="showDivTab" style="width:100%">


					</table>
				</div>
            </div>

        </div>
		
		
	</body>
</HTML>

